<template>
	<div class="login-container">
		<div class="el-form-container">
			<h3>
				<img src="../../assets/avatar.jpg" alt="" />
			</h3>
			<el-form label-width="80px" class="el-input-container">
				<el-input
					placeholder="请输入内容"
					v-model="user.name"
					style="margin-bottom: 20px"
				>
					<i slot="prefix" class="iconfont icon-yonghu"></i>
				</el-input>
				<el-input placeholder="请输入内容" v-model="user.password">
					<i slot="prefix" class="iconfont icon-key"></i>
				</el-input>
				<el-button
					class="login-btn"
					type="primary"
					size="small"
					style="margin-top: 10px"
					>登录</el-button
				>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: "loginIndex",
		data() {
			return {
				user: {
					name: "",
					password: "",
				},
			};
		},
	};
</script>

<style lang="less" scoped>
	.login-container {
		height: 100vh;
		width: 100vw;
		background-color: #2f4050;
		.el-form-container {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 450px;
			height: 245px;
			max-height: 245px;
			min-width: 450px;
			transform: translate(-50%, -50%);
			background-color: #ffffff;
			border-radius: 10px;
			.el-input-container {
				padding: 92px 35px 0 35px;
				.login-btn {
					width: 100%;
				}
				i {
					line-height: 40px;
					vertical-align: middle;
				}
			}
			h3 {
				position: absolute;
				top: 0%;
				left: 50%;
				background-color: #fff;
				z-index: 999;
				width: 140px;
				height: 140px;
				transform: translate(-50%, -50%);
				text-align: center;
				border-radius: 50%;
				line-height: 140px;
				border: 1px solid #eee;
				img {
					border-radius: 50%;
					vertical-align: middle;
				}
			}
		}
	}
</style>